import { OPTIONS_WITH_DISABLED, OPTIONS_CUSTOM } from "./constans";
import "./index.scss";
import DemoItem from "./demo-item";

const DEMO_LIST = [
  {
    title: "基本",
    desc: "基本级联",
  },
  {
    title: "禁用",
    desc: "禁用",
    disabled: true,
  },
  {
    title: "默认值",
    desc: "默认值通过数组的方式指定。",
    defalutValue: ["zujian", "basic", "color"],
  },
  {
    title: "禁用选项",
    desc: "通过指定 options 里的 disabled 字段",
    options: OPTIONS_WITH_DISABLED,
  },
  {
    title: "空状态",
    desc: "下拉列表为空时，可通过 notFoundContent 字段控制提示语",
    options: [],
  },
  {
    title: "选择即改变",
    desc: "这种交互允许只选中父级选项",
    changeOnSelect: true,
  },
  {
    title: "自定义字段名",
    desc: "自定义字段名",
    options: OPTIONS_CUSTOM,
    fieldNames: {
      value: "id",
      label: "name",
      children: "tree",
    },
  },
  {
    title: "搜索",
    desc: "可以直接搜索选项并选择",
    options: OPTIONS_WITH_DISABLED,
    hasSearch: true,
  },
];

export default function ShowCascader() {
  return (
    <div className="cascader-demo">
      {DEMO_LIST.map((item, index) => (
        <DemoItem key={index} item={item}></DemoItem>
      ))}
    </div>
  );
}
